import React, { memo, useCallback, useRef, useState } from "react"

// useCallback性能优化：
// 1.当需要将一个函数传递给子组件时，最好使用useCallback进行优化，将优化之后的函数，传递给子组件

const Home = memo((props) => {
    console.log("Home被渲染")
    return (
        <div>
            <button onClick={props.increment}>+1({})</button>
        </div>
    )
})

const App = memo(() => {
    const [count, setCount] = useState(0)
    const [message, setMessage] = useState(0)

    // useCallback没有依赖项时会发生闭包陷阱
    // const increment = useCallback(
    //     function () {
    //         // console.log("increment")
    //         setCount(count + 1)
    //     },
    //     [count]
    // )

    // const increment = function () {
    //     // console.log("increment")
    //     setCount(count + 1)
    // }

    // 进一步的优化：当count发送改变时，也使用同一个函数（了解）
    // 做法一：将count依赖移除掉 缺点：闭包陷阱
    // 做法二：useRef，在组件多次渲染时，返回的是同一个值
    const countRef = useRef()
    countRef.current = count
    const increment = useCallback(function () {
        // console.log("increment")
        setCount(countRef.current + 1)
    }, [])

    const changeMessage = () => {
        setMessage(Math.random())
    }

    return (
        <div>
            <h2>计数：{count}</h2>
            <h3>{message}</h3>
            <button onClick={increment}>+1</button>
            <Home increment={increment}></Home>
            <button onClick={changeMessage}>改变文本</button>
        </div>
    )
})

export default App
